<template>
  <div class="userinfo" >
    <span>{{name}}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <span v-if="!isAdmin">可用余额 <el-tag type="success">{{availableBalance}}</el-tag></span>
    <span v-if="!isAdmin">锁定余额 <el-tag type="info">{{lockedBalance}}</el-tag></span>
    <el-button v-if="!isAdmin" type="success" icon="el-icon-refresh" class="is-circle" @click="refreshUserInfo"></el-button>
  </div>
</template>
<style>
  .userinfo {
    display: inline-block;
    margin: 0 8px;
    vertical-align: 15px;
  }
  .is-circle {
    border-radius: 50%;
    padding: 5px;
  }
</style>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import { Message } from 'element-ui'

export default {
  name: 'userInfo',
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'name',
      'availableBalance',
      'lockedBalance',
      'roles'
    ]),
    isAdmin() {
      return this.roles.includes('ADMIN')
    }
  },
  methods: {
    refreshUserInfo() {
      store.dispatch('GetUserInfo').then(res => {
        // 拉取user_info
      }).catch(() => {
        store.dispatch('FedLogOut').then(() => {
          Message.error('验证失败，请再次登录')
          // next({ path: '/login' })
        })
      })
    }
  }
}
</script>
